[Resolved] Embed Shopify Buy Button in Nav

Home Forums Support [Resolved] Embed Shopify Buy Button in Nav

Home Forums Support Embed Shopify Buy Button in Nav

  • This topic has 14 replies, 3 voices, and was last updated 1 year ago by Leo.
Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #1449311
    Ian

    So I have been able to ad a button in the Primary Nav using the GP KB. Is there anyway to embed a Shopify button? Shopify code looks like HTML + javascript. Is this possible?

    #1449316
    Elvin
    Staff
    Customer Support

    Yes that’s 100% possible.

    You can use generate_inside_navigation hook.
    https://docs.generatepress.com/article/generate_inside_navigation/

    or if you’re using the new 3.0 flexbox, you can use generate_menu_bar_items.
    https://docs.generatepress.com/article/switching-from-floats-to-flexbox/#menu-item-float-right

    Let us know if you have further questions. ๐Ÿ™‚

    A wise man once said:
    "Have you cleared your cache?"

    #1449322
    Ian

    ok, this is fantastic. Inside customizer > General, I have chosen Structure = Flexbox. But I only see generate_inside_navigation and not generate_menu_bar_items inside the Hook Element. Any ideas?

    I was able to add the HTML button using generate_inside_navigation. Before I Float it to the proper place, I thought I might as well go with the newer Flexbox method. Any tips?

    #1449324
    Ian

    Wait a sec, perhaps use a custom hook and call it: generate_menu_bar_items

    If that is the case, how do I make this Element part of the Primary Nav so it also gets wrapped into the hamburger menu?

    #1449334
    Elvin
    Staff
    Customer Support

    I was able to add the HTML button using generate_inside_navigation. Before I Float it to the proper place, I thought I might as well go with the newer Flexbox method. Any tips?

    You may want to consider having a separate staging site for it as flexbox is only available on GP 3.0.

    Note: GP 3.0 is still in alpha stage.

    If that is the case, how do I make this Element part of the Primary Nav so it also gets wrapped into the hamburger menu?

    Perhaps you’re pertaining to “hamburger” mobile menu?

    GP’s mobile menu is a completely separate set of elements, it has its own hooks.

    You can use the generate_inside_mobile_menu_bar hook for that. https://docs.generatepress.com/article/generate_inside_mobile_menu_bar/

    You may want to look at this. It’s a visual guide for GP hooks. https://docs.generatepress.com/article/hooks-visual-guide/

    Here’s a list of available hooks that may be helpful.
    https://docs.generatepress.com/collection/hooks/?article-sort=alphabetically

    A wise man once said:
    "Have you cleared your cache?"

    #1449343
    Ian

    So I am using generate_menu_bar_items to add a Button to the Primary Nav. It works as the button shows up after the Nav items. But when the nav menu goes into hamburger mode, the button sits outside of it. Any ideas?

    Also, after adding the element using generate_menu_bar_items, the hamburger menu if left aligned and no longer center aligned. Is there a way to center align again?

    #1449346
    Elvin
    Staff
    Customer Support

    So I am using generate_menu_bar_items to add a Button to the Primary Nav. It works as the button shows up after the Nav items. But when the nav menu goes into hamburger mode, the button sits outside of it. Any ideas?

    Also, after adding the element using generate_menu_bar_items, the hamburger menu if left aligned and no longer center aligned. Is there a way to center align again?

    Oh I should mention that you’ll have to style them with CSS.

    That said, can you provide a URL link to the site you’re working on? So we could take a look at the CSS selectors used to assist with styling of these custom buttons you’re adding.:)

    You can add your details on the Private information field.

    A wise man once said:
    "Have you cleared your cache?"

    #1449369
    Ian

    Thanks Elvin, appreciate it. I can style the buttons, I am now wondering how to include it inside the Nav so that it is part of the hamburger menu. Currently, it sits outside of the hamburger menu.

    #1449406
    Elvin
    Staff
    Customer Support

    You can add it again on mobile using generate_after_slideout_navigation hook.

    So basically, you have 2 variants:
    1 for desktop (hooked to generate_menu_bar_items)
    1 for mobile (hooked to generate_after_slideout_navigation)

    You then style them differently. You can set the desktop one to appear only on desktop and the mobile one to appear only on mobile by doing something like this:

    @media (max-width:768px){
    .desktop-button{
    display:none;
    }
    .mobile-button{
    display:block;
    }
    }
    
    @media (min-width:769px){
    .desktop-button{
    display:block;
    }
    .mobile-button{
    display:none;
    }
    }

    If this is all too tedious, you can try adding your html code as a custom link on your menu at Appearance > Menu and add the JS script using some sort of Code Snippets plugin.:)

    Bottomline is, there are plenty of ways to do this.:)

    A wise man once said:
    "Have you cleared your cache?"

    #1469759
    Ian

    Hi Elvin,

    I ran through your suggestions in details and cannot get things to work. I was able to create separate elements and included the Shopify store script for the Buy Button.

    1. generate_menu_bar_items worked to get the button to display on desktop nicely but on mobile, it is showing after the hamburger menu and not inside it.

    2. generate_after_slideout_navigation also worked to display the button but now, the button shows up twice and both are outside of the mobile menu. Did I need to target classes to the buy button from your CSS to hide them on mobile vs desktop?

    #1469987
    Leo
    Staff
    Customer Support

    Are you able to link us to the page in question?

    #1469998
    Ian

    I think I found the problem. This site has DNS pointed to it but it is behind Seedprod’s Coming Soon plugin. It’s still running WP Version 5.4.2 but it says “You have the latest version of WordPress.”. How do I force 5.5.1 to update here? Any ideas?

    #1470001
    Ian

    I think I may have found something. As someone at GP was helping me troubleshoot another ticket, I had to roll back WP to test something as I am running betas for GP and GB. I installed WP Rollback and I think that is preventing the update from happening. I have since uninstalled WP Rollback, re-installed the current version and still says 5.4.2 is the latest version. Any troubleshooting tips?

    #1470004
    Ian

    OMG! Noticed I also had WP Downgrade activated while doing the previous troubleshooting. Disabled that and I now have 5.5.1. The responsive preview works now! Thank you!

    #1470692
    Leo
    Staff
    Customer Support

    Glad to hear ๐Ÿ™‚

Viewing 15 posts - 1 through 15 (of 15 total)
  • You must be logged in to reply to this topic.