Missing Classes on Product Page Causes Tracking Problem

This topic has 6 replies, 2 voices, and was last updated 1 years, 3 months ago ago by bnourse

  • Avatar: bnourse
    bnourse
    Participant
    August 30, 2023 at 22:35

    Hello,

    We’ve run into an issue that I hope you can help with. We’ve been working with the developer of Woocommerce Google Tag Manager Pro to get all tracking working and verified with our site. He’s run into an issue that is causing our “select_item” event is not firing correctly as a result of missing classes in the product title. Here’s what he says:

    Of course, basically theme should use woocommerce native functions to render html templates (e.g. product tile on product list). These function add classes/parameters to rendered html elements. Product lists in your theme looks like this (this is one of listed products):
    <div class=”first grid-sizer wishlist-disabled col-md-4 col-sm-6 col-xs-6 product-hover-slider product-view-default view-color-dark arrows-hovered et_cart-on hide-hover-on-mobile wc-prl-cat-525-527-421-419 wc-prl-tag-3196 product type-product post-47213 status-publish instock product_cat-accessories product_cat-gifts product_cat-jewelry-product-categories product_cat-jewelry product_tag-seas-s23 has-post-thumbnail taxable shipping-taxable purchasable product-type-simple”>
    <div class=”content-product et-product-height-calculated”>
    <div class=”product-image-wrapper hover-effect-slider”>
    <p class=”stock in-stock step-1″>4 in stock</p><div class=”images-slider-wrapper”>
    Holly Yashi 2in Extender Converter With Lobster Claw Magnetic Clasp 88215 Borrego Outfitters

    </div> <footer class=”footer-product”>
    </footer>
    </div>
    <div class=”text-center product-details”> <h2 class=”product-title”>
    2″ Extender/Coverter with Magnetic Clasp
    </h2>
    <div class=”products-page-brands”>
    Holly Yashi
    </div>
    <span class=”price”><span class=”woocommerce-Price-amount amount”><bdi><span class=”woocommerce-Price-currencySymbol”>$</span>40.00</bdi></span></span>
    Add to cart
    </div>
    </div>
    </div>
    and this is code from another theme, with standard WooCommerce classes:
    <li class=”product type-product post-99 status-publish first instock product_cat-bedroom has-post-thumbnail sale shipping-taxable purchasable product-type-simple”>
    <h2 class=”woocommerce-loop-product__title”>Comfortable gray bed</h2><div class=”star-rating” role=”img” aria-label=”Rated 4.50 out of 5″><span style=”width:90%”>Rated <strong class=”rating”>4.50 out of 5</span></div>
    <span class=”onsale”>Sale!</span>

    <span class=”price”><span class=”woocommerce-Price-amount amount”><bdi><span class=”woocommerce-Price-currencySymbol”>£</span>300.00</bdi></span> <span class=”woocommerce-Price-amount amount”><bdi><span class=”woocommerce-Price-currencySymbol”>£</span>250.00</bdi></span></span>
    Add to cart

    In your case, element (link to product) looks like this:

    In case of other themes, element looks like this:

    In your theme there is no “woocommerce-loop-product__link” nor “woocommerce-LoopProduct-link” (there is “product-content-image” instead), this is the problem.

    Is this something you can fix up for us?? Your assistance is, as always, appreciated. We love running Xstore on our site!

    Please, contact administrator
    for this information.
    5 Answers
    Avatar: bnourse
    bnourse
    Participant
    August 31, 2023 at 13:58

    Some clarification from the GTM Pro developer:
    These missing classes are on the product archive page (not product page): Yes, select_item is when somebody clicks on product tile, on product list page, in these product tiles css classes are missing. The missing classes are “woocommerce-loop-product__link” and “woocommerce-LoopProduct-link”, and should be included with the products image and product title links. After clicking on product image or product name, select_item should fire. Mechanism bases on css classes inside html elements – that’s how we can detect when somebody clicks on product link.

    Please advise,

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    August 31, 2023 at 15:54

    Hello, Bnourse,

    Thank you for contacting us and for using XStore.

    Unfortunately, we are unable to connect via FTP.
    You can independently replace the following files:
    https://we.tl/t-gDR1LAbk4P

    wp-content\themes\xstore\framework\woo.php
    wp-content\themes\xstore\woocommerce\content-product.php
    wp-content\themes\xstore\woocommerce\content-product-slider.php

    Kind Regards,
    8theme team

    Avatar: bnourse
    bnourse
    Participant
    August 31, 2023 at 20:08

    Hi Rose,
    Thank you so much for your quick response. I have replaced the files as you instructed, and I think this is working as desired now. I will confirm with the GTM Pro developer and let you know for sure.
    Will this be incorporated in future XStore release so I won’t need to worry about overwriting during an update?
    Regards,
    Ben

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    September 1, 2023 at 08:50

    Hello, Bnourse,

    You’re welcome!

    Yes, it will be added in the next theme update.

    Kind Regards,
    8theme team

    Avatar: bnourse
    bnourse
    Participant
    September 1, 2023 at 15:26

    Hi Rose,
    I’ve confirmed with the GTM developer that this takes care of things. Thanks again for your help!
    Regards,
    Ben

  • Viewing 6 results - 1 through 6 (of 6 total)

The issue related to '‘Missing Classes on Product Page Causes Tracking Problem’' has been successfully resolved, and the topic is now closed for further responses

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.