Versions Compared

Old Version 13

changes.mady.by.user Marta Siewierska-Stańczak

Saved on

compared with

New Version Current

changes.mady.by.user Patrycja Niestrój

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Code Block
@font-face {
    font-family: 'PT Sans';
    src: url('../fonts/PT-Sans_Regular.woff2') format('woff2'),
        url('../fonts/PT-Sans_Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: optionalswap;
}

@font-face {
    font-family: 'PT Sans';
    src: url('../fonts/PT-Sans_Bold.woff2') format('woff2'),
        url('../fonts/PT-Sans_Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: optionalswap;
}

Change category links component mobile layout from dropdown to scrollable list

Example:

...

In order to introduce a scrollable list for the category links component override the following files in your theme:

  1. src/MageSuite_ContentConstructorFrontend/templates/component/category_links.phtml

    1. remove initialisation of collapsible widget: data-mage-init='{"collapsible":{"mediaQueryScope":"(max-width: 767px)"},"ccCategoryLinks":{}}'

    2. remove dropdown trigger: cs-category-links__subtitle | cs-category-links-dropdown__trigger

  2. src/components/category-links/index.ts

    1. In order to avoid including not used styles remove import 'components/category-links/category-links-dropdown.scss'; import. Leave only import components/category-links/category-links.scss'; import

In etc/view.xml file decide how many items should be shown in the component. To always show every subcategory, which was selected in the admin panel, use a high number, f.e.

...

Another possibility for font-display is optional. It is used in some of the project, and it’s working, BUT in this case block period is extremely short (~3s). In this case, user’s connection speed might be a determining factor, where slower connections are less likely to receive custom font.

To avoid CLS while using font-display: swap; consider using fallback font: https://web.dev/articles/css-size-adjust (https://deploy-preview-15--upbeat-shirley-608546.netlify.app/perfect-ish-font-fallback/?font=Poppins ). Example of implementation in projects: https://gitlab.creativestyle.pl/toys4fun/theme-toys4fun/-/merge_requests/343.

Change category links component mobile layout from dropdown to scrollable list

Example:

...

In order to introduce a scrollable list for the category links component override the following files in your theme:

  1. src/MageSuite_ContentConstructorFrontend/templates/component/category_links.phtml

    1. remove initialisation of collapsible widget: data-mage-init='{"collapsible":{"mediaQueryScope":"(max-width: 767px)"},"ccCategoryLinks":{}}'

    2. remove dropdown trigger: cs-category-links__subtitle | cs-category-links-dropdown__trigger

  2. src/components/category-links/index.ts

    1. In order to avoid including not used styles remove import 'components/category-links/category-links-dropdown.scss'; import. Leave only import components/category-links/category-links.scss'; import

In etc/view.xml file decide how many items should be shown in the component. To always show every subcategory, which was selected in the admin panel, use a high number, f.e.

Code Block
<var name="category_links">
    <var name="hide_links_breakpoints">
        <var name="tablet">
            <var name="hide_from">99</var>
        </var>
        <var name="laptop">
            <var name="hide_from">99</var>
        </var>
        <var name="laptopLg">
            <var name="hide_from">99</var>
        </var>
        <var name="desktop">
            <var name="hide_from">99</var>
        </var>
    </var>
</var>

The following CSS can be helpful in order to make a native scroll on a list with subcategory items. use it in src/components/category-links/category-links.scss file.

Code Block
&__list-wrapper {
    display: flex;
    padding-left: $page_edge-gutter;
    padding-right: $page_edge-gutter;
    scroll-padding-left: $page_edge-gutter;
    scroll-padding-right: $page_edge-gutter;
    scroll-snap-type: x mandatory;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-behavior: smooth;
}

Share icons for PDP

The following code can be an inspiration when you have to add share icons on PDP.

.Example:

...

Files:

sharing.phtml

Code Block
<?php
$product = $block->getProduct();
$url = $product->getProductUrl();
$encodedUrl = urlencode($url);
$shareText = __('Check that out: %1 #[marketing hash] %2', $product->getName(), $url);
?>
<div class="cs-buybox__sharing">
    <ul class="cs-share">
        <li class="cs-share__item cs-share__item--facebook">
            <a onclick="window.open(this.href, '_blank', 'width=600,height=460'); return false;" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=<?= $encodedUrl ?>[optional campaing identifier]" rel="nofollow noopener" data-rel="popup" title="<?= __('Share on Facebook'); ?>" role="button" aria-label="<?= __('Share on Facebook'); ?>" class="cs-share__link cs-share__link--facebook">
                <?= $this->getLayout()
                         ->createBlock('MageSuite\ThemeHelpers\Block\Icon')
                         ->setIconUrl('images/socials/facebook.svg')
                         ->setCssClass('cs-share__icon cs-share__icon--facebook')
                         ->setAltText(__('Share on facebook'))
                         ->setInlined(true)
                         ->setLazyLoaded(true)
                         ->toHtml();
                ?>
                <span class="cs-visually-hidden"><?= __('Share on Facebook'); ?></span>
            </a>
        </li>
        <li class="cs-share__item cs-share__item--pinterest">
            <a onclick="window.open(this.href, '_blank', 'width=600,height=460'); return false;" target="_blank" href="https://www.pinterest.com/pin/create/link/?url=<?= $encodedUrl ?>[optional campaign identifier]&amp;media=<?= [ get encoded image url ]?>&amp;description=<?= urlencode($shareText) ?>[optional campaing identifier]" data-rel="popup" title="<?= __('Pin at Pinterest'); ?>" role="button" aria-label="<?= __('Pin at Pinterest'); ?>" rel="nofollow noopener" class="cs-share__link cs-share__link--pinterest">
                [icon (similarly as above)]
                [visually hidden text for screen readers (similarly as above)]
            </a>
        </li>
        <li class="cs-share__item cs-share__item--whatsapp">
            <a onclick="window.open(this.href, '_blank', 'width=600,height=460'); return false;" target="_blank" href="whatsapp://send?text=<?= urlencode($shareText) ?>[optional campaing identifier]" title="<?= __('Share with Whatsapp'); ?>" rel="nofollow noopener" role="button" aria-label="<?= __('Share with Whatsapp'); ?>" class="cs-share__link cs-share__link--whatsapp">
                [icon (similarly as above)]
                [visually hidden text for screen readers (similarly as above)]
            </a>
        </li>
        <li class="cs-share__item cs-share__item--copy">
            <a href="#" title="<?= __('Copy to clipboard'); ?>" role="button" aria-label="<?= __('Copy to clipboard'); ?>" class="cs-share__link cs-share__link--copy">
                [icon (similarly as above)]
                [visually hidden text for screen readers (similarly as above)]
                <input type="text" class="cs-visually-hidden copytoclipboard" aria-label="<?= __('Copy to clipboard'); ?>" value="<?= $shareText ?>?utm_source=copy&utm_medium=social&utm_campaign=user-share-copy">
            </a>
            <span class="cs-share__feedback-tooltip"><?= __('Product url has beed copied to your clipboard.'); ?></span>
        </li>
    </ul>
</div>

catalog_product_view.xml

Code Block
<referenceContainer name="product.info.main">
    <block class="Magento\Catalog\Block\Product\View" name="product.info.main.sharing" template="Magento_Catalog::product/view/sharing.phtml" after="-" />
</referenceContainer>

share.ts

Code Block
export default class Share {
    protected _link: HTMLLinkElement;
    protected _copySource: HTMLInputElement;
    protected _sharingText: String;
    protected _feedback: HTMLSpanElement;
    
    public constructor() {
        this._link = document.querySelector('.cs-share__link--copy');
        this._copySource = document.querySelector('#copytoclipboard');
        this._feedback = document.querySelector('.cs-share__feedback-tooltip');

        this._setEvents();
    }

    protected _copyToClipboard(): void {
        this._copySource.select();
        document.execCommand('copy');
        
        <var name="tablet">
if (this._feedback) {
           <var name="hide_from">99</var> this._feedback.classList.add('cs-share__feedback-tooltip--active');
        }
 </var>   }
    
<var name="laptop">   protected _setEvents(): void {
       <var name="hide_from">99</var>
     this._link.addEventListener('click', (e: MouseEvent): void => {
   </var>         <var name="laptopLg">e.preventDefault();

            <var name="hide_from">99</var>
if (this._copySource) {
       </var>         <var name="desktop">this._copyToClipboard();
            <var name="hide_from">99</var>}
        });

   </var>     </var>
</var>

The following CSS can be helpful in order to make a native scroll on a list with subcategory items. use it in src/components/category-links/category-links.scss file.

Code Block
&__list-wrapper {if (this._feedback) {
      display:  flex;     padding-left: $page_edge-gutter;this._feedback.addEventListener('animationend', (): void => {
    padding-right: $page_edge-gutter;     scroll-padding-left: $page_edge-gutter;     scroll-padding-right: $page_edge-gutterthis._feedback.classList.remove('cs-share__feedback-tooltip--active');
    scroll-snap-type: x mandatory;     overflow-x: auto });
    overscroll-behavior-inline: contain;
    }
   scroll-behavior: smooth; }
}

Styles according to the project design