Gift Registry Website

4 years ago
Hi everyone,
First of all thank you for our great Nopcommerce community for making this happen for us. We just created a gift registry website. I would like to make my website tests with our community. All testers are welcome :) Waiting for your feedbacks and suggestions. I will give credits when we publish our website :)

Ps: Please ignore the grammar :)

www.beraberal.com.tr
4 years ago
Just made some basic tests. Feedback:
- It is not so intuitive how to use the site
- too much info required for registering and if you make an error it desn't tell you. You have to look back if they are errors
- Show registry and its products on top right besides shopping cart and wish list.
4 years ago
Tecnofin wrote:
Just made some basic tests. Feedback:
- It is not so intuitive how to use the site
- too much info required for registering and if you make an error it desn't tell you. You have to look back if they are errors
- Show registry and its products on top right besides shopping cart and wish list.



Thank you Tecnofin. We started to write documentation. Mini registry cart is a good idea. There shouldn't be any errors :) Thank you!
4 years ago
We also need to get all information for shipping and billing purposes :(
4 years ago
Renewed the home page design. Made it for more commercial usage. Used Jssor slider instead of Nivo slider so I could inserted text and buttons on my slider images. Rest of the other features are Nop-Templates plugins with little customization.

If anyone wants I can share my slider code or you can go to jssor and customize by yourself.
3 years ago
dianoche wrote:
Renewed the home page design. Made it for more commercial usage. Used Jssor slider instead of Nivo slider so I could inserted text and buttons on my slider images. Rest of the other features are Nop-Templates plugins with little customization.

If anyone wants I can share my slider code or you can go to jssor and customize by yourself.


Dianoche,

I was building my own nopcommerce site and wanted to use jssor slider instead of nivo. Can you please share your peace of code or share the steps to use jssor slider in my nocommerce site. I saw your site, it looked fantastic with jssor slider on homepage.
3 years ago
rashid86_4u wrote:
Renewed the home page design. Made it for more commercial usage. Used Jssor slider instead of Nivo slider so I could inserted text and buttons on my slider images. Rest of the other features are Nop-Templates plugins with little customization.

If anyone wants I can share my slider code or you can go to jssor and customize by yourself.

Dianoche,

I was building my own nopcommerce site and wanted to use jssor slider instead of nivo. Can you please share your peace of code or share the steps to use jssor slider in my nocommerce site. I saw your site, it looked fantastic with jssor slider on homepage.


Hi Rashid,
Here is the sample
<script type="text/javascript" src="~/Scripts/jssor.slider.mini.js"></script>
<!-- use jssor.slider.debug.js instead for debug -->
<script>
        jQuery(document).ready(function ($) {

            var jssor_1_options = {
              $AutoPlay: false,
              $BulletNavigatorOptions: {
                $Class: $JssorBulletNavigator$
              },
              $ThumbnailNavigatorOptions: {
                $Class: $JssorThumbnailNavigator$,
                $Cols: 6,
                $Align: 200
              }
            };

            var jssor_1_slider = new $JssorSlider$("jssor_1", jssor_1_options);

            //responsive code begin
            //you can remove responsive code if you don't want the slider scales while window resizing
            function ScaleSlider() {
                var refSize = jssor_1_slider.$Elmt.parentNode.clientWidth;
                if (refSize) {
                    refSize = Math.min(refSize, 5120);
                    jssor_1_slider.$ScaleWidth(refSize);
                }
                else {
                    window.setTimeout(ScaleSlider, 30);
                }
            }
            ScaleSlider();
            $(window).bind("load", ScaleSlider);
            $(window).bind("resize", ScaleSlider);
            $(window).bind("orientationchange", ScaleSlider);
            //responsive code end
        });
</script>
    <div id="jssor_1" style="position: relative; margin: 0 0 75px 0; top: 0px; left: 0px; width: 1300px; height: 682px; overflow: hidden; visibility: hidden;">
        <!-- Loading Screen -->
        <div data-u="loading" style="position: absolute; top: 0px; left: 0px;">
            <div style="filter: alpha(opacity=70); opacity: 0.7; position: absolute; display: block; top: 0px; left: 0px; width: 100%; height: 100%;"></div>
            <div style="position:absolute;display:block;background:url('https://www.beraberal.com.tr/Themes/Test/Content/images/loading.gif') no-repeat center center;top:0px;left:0px;width:100%;height:100%;" alt="yükleme"></div>
        </div>
        <div data-u="slides" style="cursor: default; position: relative; top: 0px; left: 0px; width: 1300px; height: 582px; overflow: hidden;">
            <div data-p="225.00" style="display: none;">
                <img class="img-responsive" src="~/Themes/Test/Content/images/blogdesktop.jpg" alt="Gift registry" width="100%" />
                <div data-u="image" class="carousel-caption" id="blog">
                    <div>
                        <span class="content label light">@T("sectionblog")</span>
                        <h2 class="beraber-h2 light">@T("hediyelistesiolusturma")</h2>
                        <p class="secondary-info light">@T("anasayfalisteolustur1")</p>
                        <p class="secondary-info light2">@T("anasayfalisteolustur2")</p>
                    </div>
                </div>
                <div data-u="thumb">
                    <img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="https://www.beraberal.com.tr/Themes/Test/Content/images/blogthumb.jpg" />
                    <div class="title_back"></div>
                    <div class="title">
                        @T("sectionblogson")

                    </div>
                </div>
            </div>
            <div data-p="112.50" style="display: none;">
                <img data-u="image" class="img-responsive" src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="https://www.beraberal.com.tr/Themes/Test/Content/images/evlilikdesktop.jpg" alt="evlilik hediyesi" width="100%" />
                <div class="carousel-caption" id="evlilik">
                    <div>
                        <span class="content label light2">@T("sectionevlilik")</span>
                        <h2 class="beraber-h2 light">@T("sectionevlilik2")</h2>
                        <p class="secondary-info light">@T("sectionevlilik3")</p>
                        <a class="button-1 add-to-cart-button" id="add-to-cart-button" href="/create-registry" style="padding:10px 10px">@T("createregistrylink1")</a>
                        <p class="beraber-couple secondary-info light">@T("anasayfalistearama")</p>
                        <a class="button-1 add-to-cart-button" id="add-to-cart-button" href="/search-registries" style="padding:10px 10px">@T("searchregistrylink1")</a>
                    </div>
                </div>
                <div data-u="thumb">
                    <img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="https://www.beraberal.com.tr/Themes/Test/Content/images/evlilikthumb.jpg" />
                    <div class="title_back"></div>
                    <div class="title">
                        @T("sectionevlilik")

                    </div>
                </div>
            </div>
            <div data-p="112.50" style="display: none;">
                <img data-u="image" class="img-responsive" src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="https://www.beraberal.com.tr/Themes/Test/Content/images/bebekdesktop.jpg" alt="evlilik hediyesi" width="100%" />
                <div class="carousel-caption" id="bebek">
                    <div>
                        <span class="content label light2">@T("sectionbebek")</span>
                        <h2 class="beraber-h2 light">@T("sectionbebek2")</h2>
                        <p class="secondary-info light">@T("sectionbebek3")</p>
                        <a class="button-1 add-to-cart-button" id="add-to-cart-button" href="/create-registry" style="padding:10px 10px">@T("createregistrylink1")</a>
                        <p class="beraber-couple secondary-info light">@T("anasayfalistearama")</p>
                        <a class="button-1 add-to-cart-button" id="add-to-cart-button" href="/search-registries" style="padding:10px 10px">@T("searchregistrylink1")</a>
                    </div>
                </div>
                <div data-u="thumb">
                    <img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="https://www.beraberal.com.tr/Themes/Test/Content/images/bebekthumb.jpg" />
                    <div class="title_back"></div>
                    <div class="title" style="text-transform:capitalize">
                        @T("sectionbebek")
                    </div>
                </div>
            </div>
            <div data-p="112.50" style="display: none;">
                <img data-u="image" class="img-responsive" src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="https://www.beraberal.com.tr/Themes/Test/Content/images/dogumgunudesktop.jpg" alt="evlilik hediyesi" width="100%" />
                <div class="carousel-caption" id="dogumgunu">
                    <div>
                        <span class="content label light2">@T("sectiondogumgunu")</span>
                        <h2 class="beraber-h2 light">@T("sectiondogumgunu2")</h2>
                        <p class="secondary-info light">@T("sectiondogumgunu3")</p>
                        <a class="button-1 add-to-cart-button" id="add-to-cart-button" href="/create-registry" style="padding:10px 10px">@T("createregistrylink1")</a>
                        <p class="beraber-couple secondary-info light">@T("anasayfalistearama")</p>
                        <a class="button-1 add-to-cart-button" id="add-to-cart-button" href="/search-registries" style="padding:10px 10px">@T("searchregistrylink1")</a>
                    </div>
                </div>
                <div data-u="thumb">
                    <img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="https://www.beraberal.com.tr/Themes/Test/Content/images/dogumgunuthumb.jpg" />
                    <div class="title_back"></div>
                    <div class="title">
                        @T("sectiondogumgunu")

                    </div>
                </div>
            </div>
            <div data-p="112.50" style="display: none;">
                <img data-u="image" class="img-responsive" src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="https://www.beraberal.com.tr/Themes/Test/Content/images/hediyedesktop.jpg" alt="evlilik hediyesi" width="100%" />
                <div class="carousel-caption" id="hediye">
                    <div>
                        <span class="content label light2">@T("sectionhediye")</span>
                        <h2 class="beraber-h2 light">@T("sectionhediye2")</h2>
                        <p class="secondary-info light">@T("sectionhediye3")</p>
                        <a class="button-1 add-to-cart-button" id="add-to-cart-button" href="/create-registry" style="padding:10px 10px">@T("createregistrylink1")</a>
                        <p class="beraber-couple secondary-info light">@T("anasayfalistearama")</p>
                        <a class="button-1 add-to-cart-button" id="add-to-cart-button" href="/search-registries" style="padding:10px 10px">@T("searchregistrylink1")</a>
                    </div>
                </div>
                <div data-u="thumb">
                    <img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="https://www.beraberal.com.tr/Themes/Test/Content/images/hediyethumb.jpg" />
                    <div class="title_back"></div>
                    <div class="title">
                        @T("sectionhediye")

                    </div>
                </div>
            </div>
            <div data-p="112.50" style="display: none;">
                <img data-u="image" class="img-responsive" src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="https://www.beraberal.com.tr/Themes/Test/Content/images/bagisdesktop.jpg" alt="evlilik hediyesi" width="100%" />
                <div class="carousel-caption" id="bagis">
                    <div>
                        <span class="content label light2" style="color:white">@T("sectionbagis")</span>
                        <h2 class="beraber-h2 light" style="color:white">@T("sectionbagis2")</h2>
                        <p class="secondary-info light" style="color:white">@T("sectionbagis3")</p>
                        <a class="button-1 add-to-cart-button" id="add-to-cart-button" href="/create-registry" style="padding:10px 10px">@T("createregistrylink1")</a>
                        <p class="beraber-couple secondary-info light" style="color:white">@T("anasayfalistearama")</p>
                        <a class="button-1 add-to-cart-button" id="add-to-cart-button" href="/search-registries" style="padding:10px 10px">@T("searchregistrylink1")</a>
                    </div>
                </div>
                <div data-u="thumb">
                    <img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="https://www.beraberal.com.tr/Themes/Test/Content/images/bagisthumb.jpg" />
                    <div class="title_back"></div>
                    <div class="title">
                        @T("sectionbagis")

                    </div>
                </div>
            </div>

        </div>
        <!-- Thumbnail Navigator -->
        <div data-u="thumbnavigator" class="jssort16" style="position:absolute;left:0px;bottom:0px;width:1300px;height:100px;" data-autocenter="1">
            <!-- Thumbnail Item Skin Begin -->
            <div data-u="slides" style="cursor: default;">
                <div data-u="prototype" class="p">
                    <div data-u="thumbnailtemplate" class="t"></div>
                </div>
            </div>
            <!-- Thumbnail Item Skin End -->
        </div>
        <!-- Bullet Navigator -->
    </div>

    <!-- #endregion Jssor Slider End -->