Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Draft product preview from admin turns url into 404 #1346

Open
slack-github-archiver bot opened this issue Sep 18, 2023 · 0 comments
Open

Draft product preview from admin turns url into 404 #1346

slack-github-archiver bot opened this issue Sep 18, 2023 · 0 comments
Labels
Feature Storefront API Issues related to https://shopify.dev/docs/api/storefront

Comments

@slack-github-archiver
Copy link

slack-github-archiver bot commented Sep 18, 2023 •
edited by Ozzy11
Loading

⚠️🚨⚠️ Project/labels may still need to be added ⚠️🚨⚠️

Summary

  • Courtney reached out to the team for help with a plus merchant who had issues previewing newly created draft products after moving to Hydrogen.
  • Natalie explained that the issue arose because the active products were being redirected to the Hydrogen storefront, which couldn't find the draft products since they were only published to Hydrogen and not the online store.
  • Natalie recommended that the merchant complete the configuration for their Hydrogen storefront and provided a guide for them to follow.
  • She also identified a potential edge case for draft product preview in the JavaScript redirect and shared a workaround for this.
  • Natalie later noticed a bug in the code she had provided and shared a corrected version. Courtney thanked Natalie for her help and said she would share the new script with the merchant.

This summary was generated using OpenAI's gpt-4 with a temperature of 0.5.

🧵 Slack Thread
User Message
Courtney Lavigne
2023‑09‑15 18:13 		Hello friends :wave-frog: I hope your Fri-yay is going well so far. I have a plus merchant who just moved to Hydrogen yesterday. They noticed with newly created draft products when selecting preview. Just wanted to confirm with Headless stores if this is expected behavior and if the product even as active will not be able to be previewed as well. Internal: [removed] Product example Video Recording
👤 <@>
2023‑09‑15 18:13 		Hi @courlavigne 👋 Thanks for getting in touch! Please let us know how urgent your request is:
👤 <@>
2023‑09‑15 18:13 		In order to resolve your request as quickly as possible, please help us out with the following info, and then press 'Done!'.
👤 <@>
2023‑09‑15 18:22 		@natalieoldroyd will help you out with your request today. Please wait while they check over your request.
Natalie Oldroyd
2023‑09‑15 19:27 		Hi @courlavigne Their active products (published to both Hydrogen and Online store) are first redirected to Hydrogen storefront from the my-shopify URL they've set up as the online store's primary domain. For the draft products they're […]not Online store so when that redirect happens the product can't be found. They should complete configuration for their Hydrogen storefront. We have a guide they can follow _BUT_ I think we have an edge case for draft product preview in our js redirect shown in those docs. When I tested in my hydrogen store choosing to preview a draft product which is published to both online store and to Hydrogen changed my URL changed to

https://[…]28fc059261151713cd2ad7acfccc3491

The js redirect assigns the custom storefront primary domain leaving me with https://staffshopnat.com/products_preview which doesn't exist in my Hydrogen store and gives me a 404. This changing URL structure is default not just for headless storefronts. I also tested this in my pure liquid storefront :thinking_face:

I was playing with the js redirect in another hydrogen storefront and edited the js redirect to skip the reassignment of domain if "preview" is detected.

 
        
      function getCookie(name) {
        name = name + '=';
        var cookies = document.cookie.split(';');
        for (var i = 0; i < cookies.length; i++) {
          var cookie = cookies[i].trim();
          if (cookie.indexOf(name) == 0) {
            return cookie.substring(name.length, cookie.length);
          }
        }
      }

      // Redirect + handle discount codes
      var discountCode = getCookie('discount_code');
   if (!window.location.href.includes("/products_preview") {
      if (discountCode) {
        window.location.replace(<code>{{new_website}}/discount/${discountCode}?redirect=${window.location.pathname}</code>);
      } else {
        window.location.replace(<code>{{new_website}}${window.location.pathname}</code>);
      }
   }

So in my 2nd hydrogen storefront when I preview a draft product that's published to both hydrogen and online store the redirect doesn't happen and I get to see my product on online storefront. I'll bring this up internally as I'm not sure we ever considered this edge case.

For the merchant, they should follow that guide, switch any draft products they want to view in the browser to be available for both channels and if they want to view them in the browser they can use the redirect above.
Courtney Lavigne
2023‑09‑15 19:31 		Woooooooaah you are so smart and powerful. I want to be like you someday! Thank you Natalie:shocked-pikachu:
Natalie Oldroyd
2023‑09‑15 19:45 		In terms of active products (not set to draft) as long as they are set to published to both hydrogen and online store channels they will preview fine. The js redirect for active products (not in draft) will redirect to Hydrogen without error. The edited version I gave above handles the draft product preview scenario. I've just edited this line from just "preview" no way a merchant gonna name their product handle that on purpose:fingers_crossed:

<code> if (!window.location.href.includes("/products_preview")</code>
Courtney Lavigne
2023‑09‑15 19:50 		You are the best!!!!
Natalie Oldroyd
2023‑09‑15 19:50 		Have a great weekend!
👤 <@>
2023‑09‑15 19:51 		✅ @natalieoldroyd has marked your request as resolved. If require any further assistance, please post a new request thread.
👤 <@>
2023‑09‑15 19:51 		Hi @courlavigne! We would greatly appreciate if you could take a moment of your time to fill out a feedback form regarding this interaction :thank-you4:

@courlavigne completed Support Feedback
👤 <@>
2023‑09‑15 19:56 		Thank you so much for answering the feedback form we really appreciate it!
Natalie Oldroyd
2023‑09‑18 13:58 		Hi @courlavigne I missed a bug with that code I sent, 😬

Here is a new script which I've tested on standard redirect checkout.myshop.com and on live products which are active and on products which are just draft. The defer attribute stops a brief flash before the redirect takes place

Here's the full code

{% assign new_website = '<a href="https://headless-website.com">https://headless-website.com</a>' %}
<code>&lt;@&gt;</code>

  
    
    
    
    
    
    
      function getCookie(name) {
        name = name + '=';
        var cookies = document.cookie.split(';');
        for (var i = 0; i < cookies.length; i++) {
          var cookie = cookies[i].trim();
          if (cookie.indexOf(name) == 0) {
            return cookie.substring(name.length, cookie.length);
          }
        }
      }

      // Redirect + handle discount codes
      var discountCode = getCookie('discount_code');
      var originalURL = window.location.pathname;

      if (!originalURL.includes('/products_preview')) {
      //If originalURL detected we're going to skip making any changes.
        if (discountCode) {
          window.location.replace(<code>{{new_website}}/discount/${discountCode}?redirect=${originalURL}</code>);
        } else {
          window.location.replace(<code>{{new_website}}${originalURL}</code>);
        }
      }
    
    {{content_for_header}}
  

  
    {{content_for_layout}}
Courtney Lavigne
2023‑09‑18 15:26 		Ooo beautiful thank you my friend! I will share with the merchant 🙂

Natalie Oldroyd archived this conversation from headless-support at 2023‑09‑18 17:31.
All times are in UTC.
@blittle blittle added Feature Storefront API Issues related to https://shopify.dev/docs/api/storefront labels Jun 21, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Feature Storefront API Issues related to https://shopify.dev/docs/api/storefront
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@blittle