We have a website that's built in Drupal 7 and the site's store is being handled via BigCommerce.
With the BigCommerce API, would it be possible to pull in featured products to display in a sidebar on the Drupal site? At most it'd be the product title, image, price, and then it would link over to the full product page on BigCommmerce.
Not the "best" way, but can be done in 10 minutes... Write some AJAX to grab the featured products HTML from your BigCommerce site and insert them on your Drupal site's sidebar.
Clone this node proxy repo and host your own version on heroku for free in 5 minutes... This will allow you to make cross origin requests using AJAX and pull in the div or divs you need on your Drupal site in a short time. Seems like overkill to me to fetch from BC API for such a small feature.
Code
jQuery.ajaxPrefilter(function(options) {
if (options.crossDomain && jQuery.support.cors) {
options.url = 'YOUR OWN HOSTED PROXY APP URL HERE' + options.url;
}
});
$.get(
'BC PAGE URL HERE',
function (response) {
MANIPULATE DOM HERE WITH RESPONSE DATA
$('.home-list').html($(response).find('#content').html());
});
Bigcommerce supplies RSS / ATOM feeds for "Featured products" (and many more)
From Bigcommerce support:
LATEST 10 FEATURED PRODUCTS:
http://myawesomestore.com/rss.php?action=featuredproducts&type=rss
(RSS)
Related
I've tried searching everywhere and looking at all the docs. There's nothing that shows how apps place an iframe inside the thank you page after the checkout.
How do other apps do this?
Order status page is known as Thank you page in Shopify. From Shopify Docs
Different fields appear on the order status page depending on whether
the status is confirmed, on its way, out for delivery, or delivered.
Generally, Shopify Apps add Script Tag via API to include their JavaScript on Shopify Store. The display_scope property can be order_status or all so that custom JavaScript also loads on Thank you page.
POST /admin/api/2020-07/script_tags.json
{
"script_tag": {
"event": "onload",
"src": "https://djavaskripped.org/fancy.js",
"display_scope": "order_status"
}
}
Once the JavaScript is loaded, the app may add iframe or anything that is needed. To extend the Order status page, Shopify also provides a JavaScript function named addContentBox.
Shopify.Checkout.OrderStatus.addContentBox(
"<h2>Pick-up in store</h2>",
"<p>We are open everyday from 9am to 5pm.</p>"
);
Currently, I am working on a Shopify app and I need to retrieve all products (featured collections) that are shown on the home page.
I tried {{product}}, {{collection.products}}
I have checked the Shopify cheat sheet but I can't find anything useful.
I can access products on the collection page and the home page using Shopify liquid.
Now I want to access products on the index page using Shopify liquid.
Please help me
Thank you
The solution to the above problem
I have used jquery to find the product handles using script tags, After finding the handle of all products that are displayed on the index (home) page.
I run the following ajax to get product details using product handle.
jQuery.ajax({
url: "/products/product-handle.js",
dataType: 'json',
async: false,
success: function(p) {
//after function success the data of every product is stored in p variable
}
})
Now I am able to do other calculations with product data.
I published my website (a SPA made with vue) to Github-Pages. This website uses "history mode", so the # does not appear when navigating to a different "page".
When direct URL navigation (user types website.com/downloads for example) or a refresh while not on the root page happens, the website tries to display 404.html.
When the 404.html loads, it redirects to the homepage, passing the route name taken from the URL:
<script>
const segment = 1;
//Gets the relative path and the hash of the URL.
sessionStorage.redirect = location.pathname.split('/').slice(0, 1 + segment).join('/');
sessionStorage.hash = location.hash;
//Forces the navigation back to the main page, since it's the only entry point that works.
location.replace('/' + location.pathname.slice(1).split('/').slice(segment).join('/'));
</script>
For the user, it is a bit noticeable, but it will display the correct page.
But while loading, it will report a 404 in the network tab, which could cause issues in integrations with other websites.
Is there anyway to fake a 200 response when loading these pages?
This is a typical issue with Single Page Applications using history mode (history.pushState) to simulate a full URL so that a page isn’t reloaded when the URL changes.
Since vue.js is an SPA framework, it means there is only one HTML and tag containing the “app” id. Due to this disadvantage, Google bots would not be able to read the content of a particular landing page and your website might not get the higher rankings. To make Google bots read the content, you can use two method, “Pre-rendering” and “Server-side rendering.”
Also you can try using routing in <li> and <a> tags and buttons instead of href=“/path”. Using a router link makes page navigation very fast and it benefits the SEO of your website as well.
Completely new to shopify app development, I looked around the documentation but I did not find any hint about creating an app that add external content to pages (homepage or product pages or every pages) as countdown apps do on every pages or on product pages.
Any help on it could be a great service !
It is really simple these days:
create an App, install it in shop
in app configuration, add an App Proxy
add a JS callback to the App Proxy using a Script Tag (or however you like)
have your App return either a full Liquid string response, or JSON
render response to JS callback in theme
So you can play with this more ways than you can shake a stick. You can return Liquid with your tags so that the web theme designer people can take advantage of what is special about your App. You can just return JSON and template the results into DOM as per the usual pattern.
We are having two instances of the website right now. One is the old one containing the cart and a WP instance for pages, posts and gallery functionality. Now, to cut down on development time, we have decided to seamlessly integrate the look & feel of the old website to the new one. And with that, we need to have the following links working from the new website(wordpress side)
The login/logout link. If customer is logged in and would visit one of the WP pages, the section for the My account should reflect the logged in customer's details.
View Cart/ Cart details. The number of checked out items and cost should reflect in the wp website for purchases done within the Shopify domain.
Checkout - same as #2.
For a clearer picture(I hope), the header area looked like this - both in Shopify and our WP theme (can't post images yet):
Home | About | Shop | Gallery
My Account | Logout
View Cart(0 items/$0.0) | Checkout
Any suggestions/inputs to make the bold items working even when in wordpress is greatly appreciated.
Thank you.
Unfortunately, this is going to be really tricky, because for security reasons, your browser can’t read the cookies where Shopify stores a reference to the cart on a domain that’s not your shop.
What you could however do to sidestep this issue is:
Create a page in your Shopify store that displays the header and style it to look the same as what you have in WP
Put an iframe in your WP site with that Shopify page as its source