ZX Slideshow support thread

[NWCE]

Thanks for your reply balihr!

I am not sure if I've not explained my errors completely. In my local computer development site, I installed the plugin with just the stock demo data in Zen Cart v.2.1 and it installed correctly and I had the ZX Slideshow and could add slides under Admin->Tools.

When I was done testing on the development site, I installed my current live site database and this is where the Admin->Tools-> ZX slideshow has now disappeared.
I then uploaded my test site and updated database to my server (under a subfolder) to again, test everything and I still have this same problem of the plugin being installed and able to edit the plugin in Admin->Config->ZX Slideshow (attached screen shot) but still no option in Admin->Tools

Here is the screen shot of my server (subfolder) site:



As for uninstalling a previous version....I only added this new version to a stock Zen Cart v.2.1 during upgrading. It worked fine until I added in my live site database.

Hope this helps to further decode the problem and how I can fix this...

Thanks again!

[balihr]

Yup, this helps.
When you took the old database and dropped it onto the new site, ALL data from the old site is now available on the new site, and the data from the new site is gone. So, now your new site has data from the OLD plugin instead of the new one. The Configuration page shows the old plugin options and you're missing the new ones.

So, first of all, rename YOURADMIN/includes/init_includes/init_zx_slideshow_install.php to init_zx_slideshow_install.php_x
Then, go to admin->Tools->Install SQL Patches and copy/paste the uninstall sql for the old plugin so it's completely removed.
Now rename the file back to its original name (init_zx_slideshow_install.php) and refresh the admin.

This should now run the installer for v3 and you should get the new configuration options:

[NWCE]

Thanks for this balihr and I will do this!

Will post back when I get this done...and thanks for your help!

[NWCE]

Hi balihr...

I have implemented the uninstall of the previous version and I now have the new version installed! Thank you for your help!

I did have to do a bit of workaround to do this and here's how I had to do it....in case others need to do the same thing when installing their database.

When I rename the YOURADMIN/includes/init_includes/init_zx_slideshow_install.php file this breaks my Admin and I cannot access Admin...just get a white screen and Debug Error.

I tried just deleting that file and progressing....same result...a white screen.

I then went in and deletd this latest install of the plugin in my cart and then ran the old plugin sql stmt. I can only get the SQL stmt to run if I upload the file (uninstall-v1.5.x.sql) rather than copy and paste it into the Admin->SQLPatch area. It then processes the 5 statements to uninstall.

I now uploaded the new zx_slideshow_3 plugin and when logging into Admin...it confirms my successful install and I have both the ZX Slideshow in Admin->Config and Admin->Tools.

Lastly...I have one question on its operation.

When I fill in the fields in Admin-Tools_ZX Slideshow I have inputted 2 slides for testing. I see the first slide but when going to the second slide it does not show the image (it is uploaded to the correct directory...both images for slides are in images/slides). For fields, I am only filling in the Title, SlideURL, Slide Group, Image, Sort Order (to control display order) and date of expiry at the end.

I think where I may be going wrong is with the Slide Group. I have filled it in as "home" in both slides. In the previous plugin, we needed to use Slide1, Slide2, etc. Home1, Home2, etc. does not work properly..... Can you point me to what I've done wrong?

Also, when hovering over the slide, even though I've filled in the URL for each slide, it does not hot link it so a customer could click the slide and be taken to that product. Have I missed something to do this while inserting the slide??

Thanks again for your help!

[balihr]

I did have to do a bit of workaround to do this and here's how I had to do it....in case others need to do the same thing when installing their database.

When I rename the YOURADMIN/includes/init_includes/init_zx_slideshow_install.php file this breaks my Admin and I cannot access Admin...just get a white screen and Debug Error.

I tried just deleting that file and progressing....same result...a white screen.

I then went in and deletd this latest install of the plugin in my cart and then ran the old plugin sql stmt. I can only get the SQL stmt to run if I upload the file (uninstall-v1.5.x.sql) rather than copy and paste it into the Admin->SQLPatch area. It then processes the 5 statements to uninstall.

I apologize, this was my oversight. You should've renamed YOURADMIN/includes/auto_loaders/config.zx_slideshow.php as well - this would've avoided the white screen. Sorry about that.

When I fill in the fields in Admin-Tools_ZX Slideshow I have inputted 2 slides for testing. I see the first slide but when going to the second slide it does not show the image (it is uploaded to the correct directory...both images for slides are in images/slides). For fields, I am only filling in the Title, SlideURL, Slide Group, Image, Sort Order (to control display order) and date of expiry at the end.

The second image seems to be renamed - can you check the name of the file you're trying to upload? It comes up as

<img class="background-image__image" src="images/slides/kk_grace_slide/jpg" alt="">

which is obviously wrong - notice the forward slash instead of dot.

I think where I may be going wrong is with the Slide Group. I have filled it in as "home" in both slides. In the previous plugin, we needed to use Slide1, Slide2, etc. Home1, Home2, etc. does not work properly..... Can you point me to what I've done wrong?

Forget about slide groups, that was used in v2, but v3 is completely different.

Also, when hovering over the slide, even though I've filled in the URL for each slide, it does not hot link it so a customer could click the slide and be taken to that product. Have I missed something to do this while inserting the slide??

Thanks again for your help!

Hm... The URL is linked to the button only, not the entire slide. I'll be away until Saturday, but when I come back home, I'll provide an update to make the entire image a link.

[NWCE]

Thanks again for all of your help!

That was the fix for slide #2 not showing....I mistakenly had /jpg instead of .jpg on the filename when inputting in. Thanks for catching this!

Thanks as well for offering to have a look at the URL linking the whole slide....when you get a chance.

Much appreciated!

[NWCE]

One other question I had on creating the slide....

I know that this new plugin version uses the height and then scales your width based on the device. I am trying to make a template so when I create my slides, they won't be chopped off for the width.

In examining it on a desktop, it looks like the container size is 1039px wide. It seems like no matter what size I create my slide at...it still chops off the width. Would you know how some parameters to use???

Thanks again.

[balihr]

Thanks again for all of your help!

That was the fix for slide #2 not showing....I mistakenly had /jpg instead of .jpg on the filename when inputting in. Thanks for catching this!

Thanks as well for offering to have a look at the URL linking the whole slide....when you get a chance.

Much appreciated!

Can you do me a favor and try with the code below? Replace what you have in includes/templates/YOURTEMPLATE/templates/zx_slideshow.php

<?php

if (ZX_SLIDESHOW_STATUS == 'true') {
// TODO - slide_group will be dynamic once code for category and EZ Pages is ready
    $slides_sql = "SELECT * FROM " . TABLE_ZX_SLIDESHOW . "
            WHERE status = '1'
            AND slide_group LIKE 'home'
            ORDER BY slide_sort_order ASC";
    $slides = $db->Execute($slides_sql);
    ?>

    <div class="home-slider-area">
        <div class="swiper mySwiper">
            <div class="swiper-wrapper">
                <?php
                foreach ($slides as $slide) {
                    $slide_data = json_decode($slide['slide_data'], true);

                    $alt = [];

                    $style_slideTitlePos = $style_slideSubtitlePos = $style_slideLeadinPos = $style_slideTextPos = $style_slideButtonPos = '';
                    $style_slideTitle = $style_slideSubtitle = $style_slideLeadin = $style_slideText = $style_slideButton = '';
                    $animationsTitle = $animationsSubtitle = $animationsLeadin = $animationsText = $animationsButton = '';

                    // slide lead in
                    if (!empty($slide_data['slide_lead_in'])) {
                        $alt[] = $slide_data['slide_lead_in'];
                        if ($slide_data['slide_lead_in_color'] != '#000000') $style_slideLeadin .= ' color: ' . $slide_data['slide_lead_in_color'] . ';';
                        if ($slide_data['slide_lead_in_position'] != 'left') $style_slideLeadin .= ' text-align: ' . $slide_data['slide_lead_in_position'] . ';';
                        if ($slide_data['slide_lead_in_size'] > 0) $style_slideLeadin .= ' font-size: ' . $slide_data['slide_lead_in_size'] . 'rem; line-height: ' . $slide_data['slide_lead_in_size'] . 'rem;';
                        $style_slideLeadin = 'style="' . $style_slideLeadin . '"';

                        if ($slide_data['slide_lead_in_vertical'] > 0) $style_slideLeadinPos .= ' top: ' . $slide_data['slide_lead_in_vertical'] . '%;
    transform: translateY(-' . $slide_data['slide_lead_in_vertical'] . '%);';
                        $style_slideLeadinPos = 'style="' . $style_slideLeadinPos . '"';

                        if ($slide_data['slide_lead_in_speed'] != 'default') $animationsLeadin .= ' animate__' . $slide_data['slide_lead_in_speed'];
                        if ($slide_data['slide_lead_in_delay'] != '0') $animationsLeadin .= ' animate__delay-' . $slide_data['slide_lead_in_delay'] . 's';
                    }

                    // slide title
                    if (!empty($slide_data['slide_top_title'])) {
                        $alt[] = $slide_data['slide_top_title'];
                        if ($slide_data['slide_top_title_color'] != '#000000') $style_slideTitle .= ' color: ' . $slide_data['slide_top_title_color'] . ';';
                        if ($slide_data['slide_top_title_position'] != 'left') $style_slideTitle .= ' text-align: ' . $slide_data['slide_top_title_position'] . ';';
                        if ($slide_data['slide_top_title_size'] > 0) $style_slideTitle .= ' font-size: ' . $slide_data['slide_top_title_size'] . 'rem; line-height: ' . $slide_data['slide_top_title_size'] . 'rem;';
                        $style_slideTitle = 'style="' . $style_slideTitle . '"';

                        if ($slide_data['slide_top_title_vertical'] > 0) $style_slideTitlePos .= ' top: ' . $slide_data['slide_top_title_vertical'] . '%;
    transform: translateY(-' . $slide_data['slide_top_title_vertical'] . '%);';
                        $style_slideTitlePos = 'style="' . $style_slideTitlePos . '"';

                        if ($slide_data['slide_top_title_speed'] != 'default') $animationsTitle .= ' animate__' . $slide_data['slide_top_title_speed'];
                        if ($slide_data['slide_top_title_delay'] != '0') $animationsTitle .= ' animate__delay-' . $slide_data['slide_top_title_delay'] . 's';
                    }

                    // slide subtitle
                    if (!empty($slide_data['slide_subtitle'])) {
                        $alt[] = $slide_data['slide_subtitle'];
                        if ($slide_data['slide_subtitle_color'] != '#000000') $style_slideSubtitle .= ' color: ' . $slide_data['slide_subtitle_color'] . ';';
                        if ($slide_data['slide_subtitle_position'] != 'left') $style_slideSubtitle .= ' text-align: ' . $slide_data['slide_subtitle_position'] . ';';
                        if ($slide_data['slide_subtitle_size'] > 0) $style_slideSubtitle .= ' font-size: ' . $slide_data['slide_subtitle_size'] . 'rem; line-height: ' . $slide_data['slide_subtitle_size'] . 'rem;';
                        $style_slideSubtitle = 'style="' . $style_slideSubtitle . '"';

                        if ($slide_data['slide_subtitle_vertical'] > 0) $style_slideSubtitlePos .= ' top: ' . $slide_data['slide_subtitle_vertical'] . '%;
    transform: translateY(-' . $slide_data['slide_subtitle_vertical'] . '%);';
                        $style_slideSubtitlePos = 'style="' . $style_slideSubtitlePos . '"';

                        if ($slide_data['slide_subtitle_speed'] != 'default') $animationsSubtitle .= ' animate__' . $slide_data['slide_subtitle_speed'];
                        if ($slide_data['slide_subtitle_delay'] != '0') $animationsSubtitle .= ' animate__delay-' . $slide_data['slide_subtitle_delay'] . 's';
                    }

                    // slide text
                    if (!empty($slide_data['slide_text'])) {
                        $alt[] = $slide_data['slide_text'];
                        if ($slide_data['slide_text_color'] != '#000000') $style_slideText .= ' color: ' . $slide_data['slide_text_color'] . ';';
                        if ($slide_data['slide_text_position'] != 'left') $style_slideText .= ' text-align: ' . $slide_data['slide_text_position'] . ';';
                        if ($slide_data['slide_text_size'] > 0) $style_slideText .= ' font-size: ' . $slide_data['slide_text_size'] . 'rem; line-height: ' . $slide_data['slide_text_size'] . 'rem;';
                        $style_slideText = 'style="' . $style_slideText . '"';

                        if ($slide_data['slide_text_vertical'] > 0) $style_slideTextPos .= ' top: ' . $slide_data['slide_text_vertical'] . '%;
    transform: translateY(-' . $slide_data['slide_text_vertical'] . '%);';
                        $style_slideTextPos = 'style="' . $style_slideTextPos . '"';

                        if ($slide_data['slide_text_speed'] != 'default') $animationsText .= ' animate__' . $slide_data['slide_text_speed'];
                        if ($slide_data['slide_text_delay'] != '0') $animationsText .= ' animate__delay-' . $slide_data['slide_text_delay'] . 's';
                    }

                    // slide button
                    if (!empty($slide_data['button_text'])) {
                        $alt[] = $slide_data['button_text'];
                        if ($slide_data['button_color'] != '#000000') $style_slideButton .= ' color: ' . $slide_data['button_color'] . ';';
                        if ($slide_data['button_color_bg'] != '#000000') $style_slideButton .= ' background-color: ' . $slide_data['button_color_bg'] . ';';
                        if ($slide_data['button_size'] > 0) $style_slideButton .= ' font-size: ' . $slide_data['button_size'] . 'rem; line-height: ' . $slide_data['button_size'] . 'rem;';
                        $style_slideButton = 'style="' . $style_slideButton . '"';

                        if ($slide_data['button_vertical'] > 0) $style_slideButtonPos .= ' top: ' . $slide_data['button_vertical'] . '%;
    transform: translateY(-' . $slide_data['button_vertical'] . '%);';
                        if ($slide_data['button_position'] != 'left') $style_slideButtonPos .= ' text-align: ' . $slide_data['button_position'] . ';';
                        $style_slideButtonPos = 'style="' . $style_slideButtonPos . '"';

                        if ($slide_data['button_speed'] != 'default') $animationsButton .= ' animate__' . $slide_data['button_speed'];
                        if ($slide_data['button_delay'] != '0') $animationsButton .= ' animate__delay-' . $slide_data['button_delay'] . 's';
                    }

                    if (!empty($slide['slide_image_alt'])) {
                        $alt_text = $slide['slide_image_alt'];
                    } else {
                        $alt_text = implode(' - ', $alt);
                    }

                    ?>
                    <div class="swiper-slide">
                        <?php if (!empty($slide_data['slide_lead_in'])) { ?>
                            <div
                                    class="slideLeadin animate hidden animate__<?php echo $slide_data['slide_lead_in_effect'] . $animationsLeadin; ?>" <?php echo $style_slideLeadinPos; ?>>
                                <div class="slideLeadin__text" <?php echo $style_slideLeadin; ?>><?php echo $slide_data['slide_lead_in']; ?></div>
                            </div>
                        <?php } ?>

                        <?php if (!empty($slide_data['slide_top_title'])) { ?>
                            <div
                                    class="slideTitle animate hidden animate__<?php echo $slide_data['slide_top_title_effect'] . $animationsTitle; ?>" <?php echo $style_slideTitlePos; ?>>
                                <h2 class="slideTitle__text" <?php echo $style_slideTitle; ?>><?php echo $slide_data['slide_top_title']; ?></h2>
                            </div>
                        <?php } ?>

                        <?php if (!empty($slide_data['slide_subtitle'])) { ?>
                            <div
                                    class="slideSubtitle animate hidden animate__<?php echo $slide_data['slide_subtitle_effect'] . $animationsSubtitle; ?>" <?php echo $style_slideSubtitlePos; ?>>
                                <div class="slideSubtitle__text" <?php echo $style_slideSubtitle; ?>><?php echo $slide_data['slide_subtitle']; ?></div>
                            </div>
                        <?php } ?>
                        <?php if (!empty($slide_data['slide_text'])) { ?>
                            <div
                                    class="slideText animate hidden animate__<?php echo $slide_data['slide_text_effect'] . $animationsText; ?>" <?php echo $style_slideTextPos; ?>>
                                <div class="slideText__text" <?php echo $style_slideText; ?>><?php echo $slide_data['slide_text']; ?></div>
                            </div>
                        <?php } ?>
                        <?php if (!empty($slide_data['button_text'])) { ?>
                            <div
                                    class="slideButton animate hidden animate__<?php echo $slide_data['button_effect'] . $animationsButton; ?>" <?php echo $style_slideButtonPos; ?>>
                                <?php if (!empty($slide['slide_url'])) { ?>
                                    <a href="<?php echo $slide['slide_url']; ?>"<?php echo $slide['slide_open_new_windows'] == 1 ? ' target="_blank"' : '' ?>>
                                        <div class="slideButton__text" <?php echo $style_slideButton; ?>><?php echo $slide_data['button_text']; ?></div>
                                    </a>
                                <?php } else { ?>
                                    <div class="slideButton__text" <?php echo $style_slideButton; ?>><?php echo $slide_data['button_text']; ?></div>
                                <?php } ?>

                            </div>
                        <?php } ?>

                        <?php if (empty($slide_data['button_text']) && !empty($slide['slide_url'])) { ?>
                        <a href="<?php echo $slide['slide_url']; ?>"<?php echo $slide['slide_open_new_windows'] == 1 ? ' target="_blank"' : '' ?>>
                            <?php } ?>
                            <div class="background-image">
                                <img class="background-image__image"
                                     src="<?php echo DIR_WS_IMAGES . $slide['slide_image']; ?>"
                                     alt="<?php echo $alt_text; ?>"
                                    <?php if (ZX_SLIDESHOW_LAZY_LOAD == 'true') {
                                        echo ' loading="lazy"';
                                    } ?>
                                />
                            </div>
                            <?php if (empty($slide_data['button_text']) && !empty($slide['slide_url'])) { ?>
                        </a>
                        <?php } ?>
                        <?php if (ZX_SLIDESHOW_LAZY_LOAD == 'true') { ?>
                            <div class="swiper-lazy-preloader"></div>
                        <?php } ?>
                    </div>


                <?php } ?>
            </div>
            <?php if (ZX_SLIDESHOW_PAGINATION == 'true') { ?>
                <div class="swiper-pagination"></div>
            <?php } ?>

            <?php if (ZX_SLIDESHOW_NAV == 'true') { ?>
                <div class="swiper-button-prev"></div>
                <div class="swiper-button-next"></div>
            <?php } ?>

        </div>
        <!-- !swiper slides -->

    </div>

<?php } ?>

[balihr]

One other question I had on creating the slide....

I know that this new plugin version uses the height and then scales your width based on the device. I am trying to make a template so when I create my slides, they won't be chopped off for the width.

In examining it on a desktop, it looks like the container size is 1039px wide. It seems like no matter what size I create my slide at...it still chops off the width. Would you know how some parameters to use???

Thanks again.

There's a solution here. Hope it works for you. If not, let me know and we'll figure something out. Once you make the changes, don't forget to reload or clear browser cache so your browser loads the updated file.

BTW, try making all your slides the exact same dimensions - you seem to have 1039x330 px and 1039x369 px now. It's usually best practice to use the exact same dimensions so there's no "jumps".

[NWCE]

Yes, that new code for templates/zx_slideshow.php worked perfectly to now hotlink the entire slide to the URL! Great work! Checked the Debug Logs....no errors and clicked the links to insure all tested out perfectly....100%!

I will try implementing the code for the slide size as mentioned in that post...thanks for passing this along. I will then post back once I've had a chance to do this and let you know how it works out!

Thanks again.