Trying to Add Javascript/CSS Effects: Not Working

Posted: June 27, 2019 at 10:21 AM Quote #240856
I've been attempting to add some effects on my site for the holidays (in this case 4th of July) but have been unable to get them to display. When I test outside of Nop everything works fine but once I move it into the Nop environment nothing works no matter what I change. Any advice? I switched to a pure CSS effect thinking it may just not like JavaScript but that didn't work either.

Effect examples: Fireworks over the page, snowflakes falling, etc.
This post/answer is useful
0
This post/answer is not useful

Please login or register
to vote for this post.

(click on this box to dismiss)
Posted: June 27, 2019 at 10:41 AM Quote #240859
How are you adding the effects to your store?

Can you provide an example of how the effect is implemented?

Is your code getting inserted to your page or cuss file?

If so do you know if your code is being executed?
This post/answer is useful
0
This post/answer is not useful

Please login or register
to vote for this post.

(click on this box to dismiss)
Posted: June 28, 2019 at 8:35 AM Quote #240891
My both the CSS I use and the JavaScript is showing when I inspect the page, it's just not being implemented.

This link show's what I'm trying to do: https://cl.ly/0b9269f34865/Screen%20Recording%202019-06-28%20at%2008.30.58.71%20AM.mp4

Obviously I don't want them going at the same time but this is the test I ran outside of Nop just to make sure it wasn't my code being weird.

I have a custom plugin that allows me to insert scripts into my pages and I know it's still working but my other scripts are all working correctly. So I'm not sure why it's not allowing me to do this.
This post/answer is useful
0
This post/answer is not useful

Please login or register
to vote for this post.

(click on this box to dismiss)
Posted: June 28, 2019 at 8:50 AM Quote #240892
Hello AlyssaOdom,

judging by the animation you want to achieve, you most probably need a <canvas> element on which the script should be applied to. We cannot tell for sure, but it is very unlikely that it achieved with only CSS.

If you could provide a link to your site we can better investigate the issue and give you better pointers. Or at least give us an outside link where you say it is working, like CodePen or something similar.

Best Regards,
Valentin.
This post/answer is useful
0
This post/answer is not useful

Please login or register
to vote for this post.

(click on this box to dismiss)
www.Nop-Templates.com - the best place for nopCommerce themes and plugins

Follow us on
Facebook: http://www.facebook.com/NopTemplates
Twitter: http://twitter.com/NopTemplates
Blog: http://www.nop-templates.com/blog

www.Nop-Templates.com
nopCommerce Solution Partners
Posted: July 03, 2019 at 10:29 AM Quote #242107
I'll have to set up a code pen and send what I had. Here is a site that was using the pure CSS snowflakes that I was using though. At the very least I thought those would work but I was stuck in the same situation.

https://pajasevi.github.io/CSSnowflakes/
This post/answer is useful
0
This post/answer is not useful

Please login or register
to vote for this post.

(click on this box to dismiss)
Posted: July 03, 2019 at 12:48 PM Quote #242120
The CSS snowflakes seem to work without a problem when I test it on a NopCommerce store. How is the code being inserting to your page.
Once you can let us view your store it will be easier to identify the problem.


It seems that most likely you custom plugin is not inserting the code correctly, possibly into the incorrect element of the page.

Is your CSS code a child of the body tag?
This post/answer is useful
0
This post/answer is not useful

Please login or register
to vote for this post.

(click on this box to dismiss)
Posted: July 03, 2019 at 12:54 PM Quote #242121
https://ibb.co/Fz1rr71


Have a look at the image to see an example of the code.
This post/answer is useful
0
This post/answer is not useful

Please login or register
to vote for this post.

(click on this box to dismiss)
Posted: July 03, 2019 at 2:10 PM Quote #242131
Where are you inserting the divs? I was using the HTML Widgets plugin but it wasn't working for me. I tried the same for fireworks too but if my divs are empty it removes them.

CSS Fireworks Example: http://jsfiddle.net/elin/7m3bL/
This post/answer is useful
0
This post/answer is not useful

Please login or register
to vote for this post.

(click on this box to dismiss)
Posted: July 03, 2019 at 4:39 PM Quote #242136
Try the body widget zone.

PublicWidgetZones.BodyEndHtmlTagBefore


Strange your div's are being removed. Are you not inserting the code into the head element of your page?
This post/answer is useful
0
This post/answer is not useful

Please login or register
to vote for this post.

(click on this box to dismiss)
Posted: July 03, 2019 at 4:43 PM Quote #242137
I will try adding them there. And as for it removing code, I'll enter this:
<div class="pyro">
    <div class="before"></div>
    <div class="after"></div>
</div>

But once I save it changes to this:
<div class="pyro">&nbsp;</div>
This post/answer is useful
0
This post/answer is not useful

Please login or register
to vote for this post.

(click on this box to dismiss)
Premium support services
  • Dedicated premium support services provided by core developers are intended for persons who run mission critical websites, work on projects with tight deadlines, or want to get dedicated support.
Professional services
  • Want to open a new store? Want to take your store to the next level? Need a custom extension? We can customize nopCommerce to fit your store perfectly. Request a quote to get started.
eCommerce CONFERENCE 2019
Learn more