Dawn Theme Sku question

[sharpie9701]

Hello.  I am working on tweaking a few things for our website.  I wanted to have our sku display in a different location on the mobile view vs desktop view.  I am using this code and it works great for displaying in one place.  However, since we have more mobile viewers, I moved the sku code to above the product gallery pictures as I moved the title of my products there as well.  I can't figure out how to display the sku on the desktop version.  I copy and pasted the code, but all I get is "sku" displayed.  I'm guessing because the code has already been rendered on page refresh, it can't render the code twice?  Is there a way to have the sku essentially display in 2 positions, 1 for mobile and 1 for desktop?

<div class "sku">
<div class="hideAll">
<p><span>Sku#: </span><span class="sku"></span></p>
</div>

{% capture 'variant_sku' %}
{% for variant in product.variants %}
{{variant.id}}:{{ variant.sku| json }}
{% unless forloop.last %},{% endunless %}
{% endfor %}
{% endcapture %}

<script>
const currentVariantSku = {{ product.selected_or_first_available_variant.id }};
const variantSku = { {{ variant_sku }} };
const getSku = (id) => {
let selector = document.querySelector('.sku');
let hide = document.querySelector('.hideAll')
if (variantSku[id]) {
hide.style.display = 'block'
selector.innerHTML = variantSku[id];
}
else
hide.style.display = 'none'
}
getSku(currentVariantSku);

</script>
</div>

[Zqdo]

I'd be happy to help. Could you give me a little bit more of what you're trying to do?

[sharpie9701]

Thank you for the replay.  I was just notified of the reply.  So, I have attached 2 screen shots, 1 of the desktop view and 1 of the mobile view.  The desktop view is where I'm having an issue.

With the Dawn theme, it's default for the mobile view to have the title, reviews, etc below the gallery pictures.  Because it looks cleaner to have the title, sku and reviews above the gallery, I have moved them there.  But, since the coding for the mobile view, is higher than the desktop coding, that's why the mobile view is fine vs the desktop view for the sku.  I can tell that since the sku has been rendered (mobile view) when the webpage loaded, it's not loading the same coding in the area where it controls the desktop view.

Essentially, I just want to mirror the display of the sku for the desktop view.  I'm guessing, I need to recall the rendering of the code from the mobile view section and have it as a block view in the section for the desktop.  I'm just not that good at coding to figure it out.

[Zqdo]

Ok. So all you want to do is show the sku on mobile like it's shown on desktop?

Also, do you have a link to a website that I can take a look at to see where this will be?

[sharpie9701]

It was showing fine on mobile, just not on the desktop.  And that's only because I moved the code.  Here's the webpage.  You will see that on the desktop, it only says "sku" but does not display.  However, on mobile it displays fine, again because I moved the code so that for mobile view, the title, sku, and product reviews were above that gallery.

it would be nice if that was the default for the Dawn theme, then this kind of stuff wouldn't happen.  You need a set of code to control both the mobile view and the desktop view for the title, product reviews, and sku, again because they are in different locations, other than the default.

Remember, default for the mobile view is title, reviews etc all below the product gallery

[sharpie9701]