Magento - Simple Configurable Products Extension - javascript

I'm using the Magento SCP extension to change various details on the product page when selecting an option in the configurable product.
I need to extend the functionality so that I can change the description, image etc when clicking on a thumbnail image instead of changing the list options.
As far as I can tell, the function that deals with the changing of product description etc is:
Product.Config.prototype.reloadPrice
I'm not sure how I can run this when I click on a thumbnail, what information do I need to pass to the function to run properly?

Take a look at this site I am working on, this is using bundle products. But I am just looking to get an idea of what you are trying to do..
Click on the individual products to see them load below your selection
Let me know if this is what you are looking to do and I can help guide you
Site Example
The site I am demonstrating is using a custom route I load via Ajax.

I figured it out in the end.
When changing the dropdown values from clicking on an image elsewhere in the page I need to run the following code:
spConfig.configureElement(element)
Where (element) is the Dropdown's ID which I stored in a VAR further up the page.

Related

Reload external javascript library in AlpineJS modal

I'm trying to make something work, that seems easy but can't figure it out yet.. Here's the thing:
I have a livewire component. This component can trigger a modal window to show user details. One of the field is a select that will have a list of product associated. Because I have a lot of products, I want to use a dynamic select by using the library choices.js That way, I can filter the product from an ajax call instead of loading the whole datas directly into my select element.
Problem: I can't make the choices.js library work. It seems that the plugin won't be initialized since it lives inside the modal box, that will be trigger after the first page load.
How can I achieve to make the choices.js library initialize? Is there a workaround known?
Thanks in advance for any feedback that could help!
Cheers!

How to add a class name to an element on a different page

I have an image slider where the class name 'current' changes when the next and previous buttons are clicked to display the current image. I wanted to create a separate Overview page which displays all the images in a grid, then when an image is clicked you are directed to the Slider page, and the selected image has the class of 'current'.
Because I can't access and add/remove the 'current' class from my Overview page, I'm not sure how to achieve the functionality I'm looking for. I'm hoping there's a way to load the Slider page and pass in a function which alters the class names on the page you're directed to.
Any help or suggestions on a different way to approach this would be appreciated.
Also, this is just using Vanilla JS. I'm relatively new and still trying to understand the basics.
Thanks!
The easiest solution that comes to mind is using GET parameter: https://example.com/overview?currentimage=1. This way you include the image id in the url and can act accordingly on the overview page. This however works only as you open the new page.
If you'd like the image to change in real time on the overview page as it changes on the slider, you have to look into cookies, session, and/or HTML5 Web Storage. These allow you to store and share data across multiple pages. You update the cookie/session/storage on slider change, and then retrieve the data on the overview page with a loop that checks for changes every second or two, and updates the grid.

How do I create select menu in an external file and embed it in html to show the menu

My website has individual pages for members, but I have a select menu used to scroll from one member to the other. I have the select menu coded in the html on every page, but I need a better solution since my membership is growing.
I need to be able to create that same select menu in a separate file with the ability, when selected to jump to another member page, have that embedded in the body where I need it so that all I have to do is alter/ update the external file and it'll be done for all the member pages.
I've looked into javascripting it, mysqling it, but can't find (looking on youtube) a code to exactly help me in what I need.
My typical code for the select
//(select.....
//(option value="http:www.website-Profile-blahblah.html.... so on and so forth.
I need to pull this from an external file to use across the board and place it in the body where I need it.
thanks for any help you can offer.
In general this sounds like something you should be using a back end rendering engine for. As far as the select goes, this would be a great place to use a dropdown menu such as the one provided by bootstrap since clicking a select won't actually move you to another page.
If you dont want to use/can't use a back end rendering engine to render the options, I would suggest looking at angular.js which has a great ng-repeat and ng-option feature that would allow you to dynamically build the select/dropdown with as many users as you want.
angular ng-repeat page: https://docs.angularjs.org/api/ng/directive/ngRepeat
bootstrap dropdown: http://www.w3schools.com/bootstrap/bootstrap_dropdowns.asp (note the a tags could go directly to the user's page)
From experience in cases like this, it is much easier to have an SQL table to store the links you would like to use. The next thing to do is to have your back-end send you the list of links. With this, you can dynamically create the option tag and append it to your select tag. functions like newOptionTag.setAttribute('value', 'url'),document.createElement('option') and selectElement.appendChild(newOptionTag) should help you on your way
If you really want to use a seperate file, you could store the membernames and links in a json file. On document load get the file, parse it, then use the object to build the options.
The w3schools website (though frowned upon by some) has a json tutorial and an example that is already halfway there.
EDIT: I see it actually uses mysql to build the json file...

Dynamically display database information onclick

I set up a web service using LAMP for personal use.
Basically, I have a scrollable list with some database information I pull once in the PHP script. I'd like to be able to click on one of the items, and have more information appear in a preview pane . (preview pane is set up)
I don't expect to ever have more than 100 entries in my database. Also, the data I'm pulling is very small...about 10 fields, all text data.
My question is as follows:
If I pull all the data I need in one shot, how can I store it so that each block of data I define (2-3 rows are what I need in the preview pane) is "cached" and I can access that given block at will so I can display it upon clicking its corresponding list entry?
Basically, this is about the same as clicking an email in a web-browser and having the rest of the message show up in a preview pane.
Thanks.
nb: the fact that I'm using a preview pane or a list is irrelevant. Just describing what I'm doing.
If I understand correctly, you would like to create a simple page, where several details are hidden until you click on different buttons. If you would like to do this in a "cached" way, you can try the following:
Fetch the complete data so that everything (with details) ends up in the result HTML. Everything: I mean, the parts which should be visible at all times and also the details which should be visible only after pressing a button.
Now, to the design. You will have to write CSS code, which will hide the details. (Of course, for that, you will have to create HTML in step 1 which will let you target the details via CSS classes, for example.) You will also have to figure out how to create buttons.
The most complicated part is to bind the buttons to Javascript actions, which will perform showing the hidden details. You can control all CSS properties from Javascript, so for example you can alter the position, the size, the text color etc. of a <div> dynamically.
Most people nowadays use jQuery for tasks like the one in step 3, or even software libraries built on the top of jQuery. That could help a lot if you're just starting out with tasks like this one. On the jQuery site, you will find a great place to start, called the jQuery Learning Center.
Edit: I've created a very basic fiddle to let you test the JS part of my concept, see it here: http://jsfiddle.net/eL9mj/22/

How to choose a specific thumbnail photo on like button

I have a webpage i keep adding a like button app to but whenever i click like i get some random member phot of a lady on facebook representing my page. this is frustrating.
I find all this html script and i cant seem to put it together properly so will you just please give me a simple paste ready like button formula with a set specific thumbnail photo that I can choose to represent my own page?
Use the open graph properties for your webpage defined here:
http://developers.facebook.com/docs/opengraph/

Categories

Resources