Fun little challenge // Dynamic variant title on product page

Tourist
14 0 3

Hey guys,

Today I'm facing a tricky little challenge and I thought some of you might be able to help me.

Page we're looking at:

What I'm trying to do:

Under the product option selectors, I'm currently displaying my {{product.title}} : L'INSERT
Next to / Instead of that, I would like to use {{ product.selected-variant.title }} to display the full name of the options selected by the user, i.e BIRKIN 35 ORANGE, and have that information update dynamically as the checked options are edited by the user.

Where I got stuck:

{{ product.selected-variant }} only works if there is a valid ?variant= in the URL. When I add the tag to my code, it works, but only if I refresh the page with the ?variant=### in the URL bar. How can I solve this? Should the page refresh somehow as the user makes their selection? Should I use a totally different approach?

Looking forward to hearing with you guys come up with.. I'm pretty new at liquid/shopify in general and still fascinated by challenges like this one!

Thanks,
D.

1 Like
Astronaut
1890 1 392

Most themes have a Javascript function called selectCallback.  This function activates whenever a new variant is selected and is what updates the price, for example, on the page.  We can use this function to also update the product/variant title.

If you're looking for more help, you may want to provide access to your shop.

0 Likes
Tourist
14 0 3

Alex,

Thanks for your reply!

The page can be seen at: http://7rueparadis.com/products/linsert

The password: suitoo

Looking forward to hearing your thoughts.

0 Likes
Astronaut
1890 1 392

In product.liquid, make the following change.

            <div class="product-single__title"><h1 class="product-title--hr">{{ product.title }} <span id="variantTitle"></span></h1></div>

In Assets/timber.js, add the indicated lines (<<<).

  // Selectors
  var $productImage = $('#ProductPhotoImg'),
      $addToCart = $('#AddToCart'),
      $variantTitle = $('#variantTitle'),                <<<
      $productPrice = $('#ProductPrice'),
      $comparePrice = $('#ComparePrice'),
      $priceWrapper = $('.product-single__price--wrapper'),
      $quantityElements = $('.js-quantity-selector, label + .js-qty'),
      $addToCartText = $('#AddToCartText');

  if (variant) {

    $variantTitle.text(variant.title);                   <<<

    // Update variant image, if one is set
    if (variant.featured_image) {
      var newImg = variant.featured_image,
          el = $productImage[0];
      Shopify.Image.switchImage(newImg, el, theme.showVariantImage);

I hope this helps.

1 Like
Tourist
14 0 3

Alex,

This worked perfectly. Thanks a lot for your time!

Since you seem to know what you're doing here, perhaps you'd be willing to check out this other pending question I have? Find it here: https://ecommerce.shopify.com/c/ecommerce-design/t/dynamically-update-the-size-option-picker-when-a-...

Since you've had access to my shop, what I'm trying to do is have sizes 25 30 35 only show up when the 'Birkin' option is selected, and have all the other sizes show when the 'Kelly' option is selected.

Thanks again!
D

0 Likes
Shopify Partner
1 0 0

Hi Alex - I thought I'd hop in here as well since I have a similar problem - we're also trying to dynamically filter variants as a customer clicks through various options. In our case we're selling shirts, so it's really helpful to have customers be able to have visual cues about what option combinations are in stock (the variants are cut, neck size, sleeve size). 

I tried using the link options tutorial here (https://docs.shopify.com/manual/configuration/store-customization/advanced-navigation/linked-product...) and while the options are filtered through at the outset, if you go back and change anything, they don't seem to refilter. 

I'm guessing that there needs to be an API call of some sort to the client in order for this to work? Does that sound right? 

Here's the visual of the page area that I'm talking about if that's helpful: 

 

0 Likes
New Member
4 0 0

Where would the equivelant of this be in the Narrative theme? I've been trying to find where to place the code but to no avail.

0 Likes